/*
 * @Description: 首页
 * @Author: Yong
 * @Date: 2021-09-23 10:34:34
 * @LastEditTime: 2021-09-27 15:29:00
 */
import React from "react"
import './index.scss'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
import { BASE_URL, getCurrentCity } from '../../utils'
import { getSwiper, getGroups, getNews } from '../../apis/index'
// import { getCurrentCity } from '../../utils/map-function'
import SearchHeader from '../../components/SearchHeader'

// 导入导航菜单图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
// 导航菜单数据
const navList = [
    {
        id: 1,
        img: Nav1,
        title: '整租',
        path: '/home/list'
    },
    {
        id: 2,
        img: Nav2,
        title: '合租',
        path: '/home/list'
    },
    {
        id: 3,
        img: Nav3,
        title: '地图找房',
        path: '/map'
    },
    {
        id: 4,
        img: Nav4,
        title: '去出租',
        path: '/rent/add'
    }
]
export default class Index extends React.Component {
    state = {
        // 轮播图数据
        swiperList: [],
        isSwiperLoaded: false,
        // 租房小组数据
        groupList: [],
        // 最新咨询数据
        newList: [],
        // 当前城市名称
        currCityName: '广州'
    }

    // 获取轮播图数据
    async GetSwiper () {
        const swiperList = await getSwiper()
        this.setState({
            swiperList,
            isSwiperLoaded: true
        })
    }

    // 获取租房小组列表
    async GetGroups () {
        const groupList = await getGroups()
        this.setState({
            groupList,
        })
    }

    // 获取最新咨询列表
    async GetNews () {
        const newList = await getNews()
        this.setState({
            newList,
        })
    }

    // 获取当前城市名称
    async GetCurrentCity () {
        const { label, value } = await getCurrentCity()
        this.setState({
            currCityName: label
        })
    }

    componentDidMount () {
        this.GetSwiper()
        this.GetGroups()
        this.GetNews()
        this.GetCurrentCity()

    }

    // 渲染轮播图结构
    renderSwiper = () => {
        return this.state.swiperList.map(item => (
            <a key={item.id} ref="http://www.alipay.com" style={{ display: 'inline-block', width: '100%', height: 181 }}>
                <img src={`${BASE_URL}${item.imgSrc}`} style={{ width: '100%', verticalAlign: 'top' }} />
            </a>
        ))
    }

    // 渲染导航菜单
    renderNavList = () => {
        return navList.map(item => (
            <Flex.Item
                key={item.id}
                onClick={() => this.props.history.push(item.path)}
            >
                <img src={item.img} alt="" />
                <h2>{item.title}</h2>
            </Flex.Item>
        ))
    }

    // 渲染导航菜单
    renderGroupList = () => {
        return (
            <div className="group">
                <h3 className="group-title">
                    租房小组 <span className="more">更多</span>
                </h3>
                {/* 宫格组件 */}
                <Grid
                    data={this.state.groupList}
                    columnNum={2}
                    square={false}
                    hasLine={false}
                    renderItem={item => (
                        <Flex className="group-item" justify="around" key={item.id}>
                            <div className="desc">
                                <p className="title">{item.title}</p>
                                <span className="info">{item.desc}</span>
                            </div>
                            <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
                        </Flex>
                    )}
                />
            </div>
        )
    }

    // 渲染最新咨询
    renderNewList = () => {
        return this.state.newList.map(item => (
            <div className="news-item" key={item.id}>
                <div className="imgwrap">
                    <img className="img" src={`${BASE_URL}${item.imgSrc}`} alt="" />
                </div>
                <Flex className="content" direction="column" justify="between">
                    <h3 className="title">{item.title}</h3>
                    <Flex className="info" justify="between">
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                    </Flex>
                </Flex>
            </div>
        ))
    }

    render () {
        const { isSwiperLoaded, currCityName } = this.state
        return (
            <div className="index">
                {/* 轮播图 */}
                <div className="swiper">
                    {isSwiperLoaded ? (
                        <Carousel autoplay infinite autoplayInterval={5000}>
                            {this.renderSwiper()}
                        </Carousel>
                    ) : ('')}
                    {/* 顶部导航栏 */}
                    <SearchHeader cityName={ currCityName }></SearchHeader>
                </div>
                {/* 导航菜单 */}
                <Flex className="nav">{this.renderNavList()}</Flex>
                {/* 租房小组 */}
                {this.renderGroupList()}
                {/* 最新咨询 */}
                <div className="news">
                    <h3>最新咨询</h3>
                    <WingBlank size="md">{this.renderNewList()}</WingBlank>
                </div>
            </div>
        )
    }
}